<template>
  <a-button type="primary" @click="openBgImage">
    <template #icon>
      <FileImageFilled />
    </template>
  </a-button>
  <a-modal
    width="1000px"
    v-model:visible="visible"
    title="背景图片选择"
    ok-text="确认"
    cancel-text="取消"
    @ok="hideModal"
  >
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="common" tab="通用图片">
        <ImageTypes></ImageTypes>
      </a-tab-pane>
      <a-tab-pane key="my" tab="我的图片">
        <ImageTypes></ImageTypes>
      </a-tab-pane>
      <a-tab-pane key="upload" tab="上传图片">

      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { FileImageFilled } from "@ant-design/icons-vue";
import ImageTypes from "./components/ImageTypes.vue";

const visible = ref<boolean>(false);
const activeKey = ref<string>("common");
const openBgImage = () => {
  visible.value = true;
};
const hideModal = () => {
  visible.value = false;
};
</script>

<style scoped></style>
